<script setup>
import ImageUpload from "@/common/ImageUpload.vue";
import {ref, onMounted} from "vue";
import {ElMessage} from "element-plus";
import {addProduct, getClassifyList, getProductById, updateProduct} from "@/api/product.js";

//有id是编辑，没有id是添加
const {id} = defineProps({
  id: {
    type: Number,
    default: undefined
  },
})

onMounted(() => {
  getClassify()
  if (id !== undefined) {
    getInfo(id)
  }
})

//分类列表
const classifyList = ref([])

//场景列表
const scenario = [
  {
    label: '表白求婚',
    value: '表白求婚'
  },
  {
    label: '生日祝福',
    value: '生日祝福'
  },
  {
    label: '母亲节',
    value: '母亲节'
  },
  {
    label: '教师节',
    value: '教师节'
  },
  {
    label: '毕业季',
    value: '毕业季'
  }
]
//获取商品分类信息
const getClassify = async () => {
  const {data} = await getClassifyList();
  classifyList.value = data.map(item => {
    return {
      label: item.name,
      value: item.id
    }
  })
}
//获取商品信息
const getInfo = async (id) => {
  const {code, data, msg} = await getProductById(id);
  if (code !== 200) {
    ElMessage.error(msg)
    window.location.reload();
    return
  }
  form.value = data
}

//表单
const form = ref({
  id: undefined,
  image: undefined,
  name: undefined,
  description: undefined,
  price: undefined,
  status: 1,
  classifyId: 1,
  scenario: undefined,
  other: [],
})
//提交表单
const onSubmit = async () => {
  if (id === undefined) {
    await add()
  } else {
    await edit(id)
  }
}
const emit = defineEmits(['success'])
//添加分类
const add = async () => {
  const {code, msg} = await addProduct(form.value);
  if (code !== 200) {
    ElMessage.error(msg)
    return
  }
  ElMessage.success(msg)
  emit('success')
}
//修改分类
const edit = async () => {
  const {code, msg} = await updateProduct(form.value);
  if (code !== 200) {
    ElMessage.error(msg)
    return
  }
  ElMessage.success(msg)
  emit('success')
}
</script>


<template>
  <el-form label-width="100px">
    <el-form-item required label="商品名称">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item required label="花材">
      <el-select v-model="form.classifyId" placeholder="请选择花材">
        <el-option
            v-for="item in classifyList"
            :key="item.id"
            :label="item.label"
            :value="item.value"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="场景">
      <el-select v-model="form.scenario" placeholder="请选择场景">
        <el-option
            v-for="(item,index) in scenario"
            :key="index"
            :label="item.label"
            :value="item.value"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item required label="商品简介">
      <el-input v-model="form.description"></el-input>
    </el-form-item>
    <el-form-item required label="商品主图">
      <image-upload v-model:url="form.image"/>
    </el-form-item>
    <el-form-item required label="商品价格">
      <el-input v-model="form.price" suffix-icon="money"></el-input>
    </el-form-item>
    <el-form-item label="其他">
      <el-checkbox-group v-model="form.other">
        <el-checkbox value="新品" name="other">新品</el-checkbox>
        <el-checkbox value="热销" name="other">热销</el-checkbox>
        <el-checkbox value="含礼品" name="other">含礼品</el-checkbox>
        <el-checkbox value="含贺卡" name="other">含贺卡</el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item required label="显示状态">
      <el-switch :active-value="1" :inactive-value="0" v-model="form.status"></el-switch>
    </el-form-item>
  </el-form>
  <div style="text-align: right; margin-top: 20px">
    <el-button type="primary" @click="onSubmit">提交</el-button>
  </div>

</template>

<style scoped lang="scss">

</style>
